<template>
  <div id="WoDe">
    <van-nav-bar
      title="个人中心"
      right-text="编辑"
      @click-right="onClickRight"
      class="nav_bar"
    />
    <hr />
    <div class="content">
   
        <img :src="getinfo.avaUrl" @click="login()" />
      
      <div class="id">
         <p class="p1">{{ getinfo.name }}</p>
         <p class="p2">小白信用</p>
      </div>
      <div class="gongj">
        <img src="../assets/grxx2.png" id="grxx" alt="">
        <img src="../assets/sz.png" id="sz" alt="">
      </div>
    </div>
    <hr class="hrr" />
    <br>
    <div class="caidan">
      <div class="item">
        <img src="../assets/dfk.png" >
        <p>待付款</p>
      </div>
      <div class="item">
        <img src="../assets/dsh.png" >
        <p>待收货</p>
      </div>
      <div class="item">
        <img src="../assets/tksh.png" >
        <p>退款售后</p>
      </div>
      <div class="item">
        <img src="../assets/qbdd2.png" >
        <p>全部订单</p>
      </div>
    </div>
    <br>
    <hr>
    <div class="info">
    <mt-cell title="用户名：">
      <span>{{getinfo.name}}</span>
      <img slot="icon" src="../assets/my.png" width="24" height="24">
    </mt-cell>
    <mt-cell title="手机号：">
      <span>{{getinfo.phone}}</span>
      <img slot="icon" src="../assets/iphone.png" width="24" height="24">
    </mt-cell>
    <mt-cell title="年龄：">
      <span>{{getinfo.age}}</span>
      <img slot="icon" src="../assets/age.png" width="24" height="24">
    </mt-cell>
    <mt-cell title="性别：">
      <span>{{getinfo.age}}</span>
      <img slot="icon" src="../assets/sex.png" width="24" height="24">
    </mt-cell>
    </div>
    <mt-button size="large" class="logout" @click="logout()">退出登录</mt-button>
    
  </div>
</template>
<script>
import url from '../tools/url.js';
export default {
  name: "WoDe",
  data() {
    return {};
  },
  methods: {
    //编辑个人中心
    onClickRight() {
      this.$router.push({
        path: "/BianJi",
        query: {
          id: this.getinfo.id,
        },
      });
    },
    login() {
      this.$router.push("/Login");
    },
    logout() {
      var token = sessionStorage.getItem("token");
      var str = `token=${token}`;
      this.axios.post(url.LOGOUT, str).then((res) => {
        if (res.data.code == 200) {
          console.log(res);
          sessionStorage.removeItem("token");
          this.$router.push("/Login");
        } else {
        }
      });
    },
  },
  computed: {
    getinfo() {
      return this.$store.state.info;
    },
  },
};
</script>
<style scoped>
.gongj{
  width: 30%;
}
#grxx{
  margin-top: 20px;
  margin-left: 20px;
  width: 32%;
  height: 35%;
}
#sz{
  margin-top: 15%;
  margin-left: 30px;
  width: 20%;
  height: 25%;
}
.id p{
  color:white
}
.id{
  width: 200px;
}
.p1{
  margin-top: 10%;
}
.p2{
  font-size:12px
}
.content img {
  border-radius: 50%;
  width: 15%;
  height: 60%;
  margin-left: 5%;
  margin-top: 5px;
}
.login {
  margin-left: 20px;
  margin-top: 0px;
  font-size: 20px;
}
.nav_bar {
  background: #FF4400;
}
.content {
  height: 100px;
  background: url(https://img12.360buyimg.com/img/s1500x886_jfs/t1/115726/22/13102/240974/5f18fb83Ee40e230b/d4f2a67087fd443a.png) no-repeat scroll 0 0/cover;
  display: flex;
}
.info p{
  margin-top: 15px;
  margin-left: 10px;
}
.logout{
  color:white;
  background:#FF976A
}
.caidan{
  display: flex;
  justify-content: space-between;
}
.caidan img{
  margin-left: 35%;
  width: 30%;
}
.item{
  

}
.item p{
  text-align:center
}
</style>
